<template>
  <div class="wrapper-yuanshijianli">
    <div ref="container" :style="style" v-if="originTHml.pdf"></div>
    <div class="down-box link" @click="onDownLoad" v-if="originTHml.pdf">
      <vertical-align-bottom-outlined />
      下载简历
    </div>
    <div class="down-box link upload-box" v-if="originTHml.pdf">
      <UploadBox @success="getSelectResumeOriginal">
        <!-- 上传附件简历 -->
        <a-button key="submit" class="resume-upload__btn" @click="handleButton">
          <span class="spanUpFiles2">
            <redo-outlined />
            重新上传</span
          >
        </a-button>
      </UploadBox>
    </div>
    <div class="wrapper-yuanshijianli2" v-if="!originTHml.pdf">
      <div>
        <div class="top">
          <img src="../imgs/NotUpload.png" alt="" />
          <p class="p1">未上传附件简历</p>
          <p class="p2">上传附件简历会更受附近招聘者关注～</p>
        </div>
        <div class="bottom">
          <UploadBox
            @success="getSelectResumeOriginal()"
            @error="loading = false"
          >
            <!-- 上传附件简历 -->
            <a-button
              key="submit"
              class="resume-upload__btn"
              :loading="loading"
              @click="handleButton"
            >
              <span class="spanUpFiles2">
                <svg-icon
                  name="shangchuanfujian"
                  width="14"
                  height="14"
                  style="margin-top: -1px"
                />
                上传附件简历</span
              >
            </a-button>
          </UploadBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import ResumeService from '@/api/resume';
import { useUserStore } from '@/store/user';
// @ts-ignore
import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';
import UploadBox from './UploadBox.vue';
import { nextTick, onUnmounted, ref, reactive } from 'vue';
import {
  VerticalAlignBottomOutlined,
  RedoOutlined,
} from '@ant-design/icons-vue';
import { convertRes2Blob } from '@/utils/util';

const userStore = useUserStore();
const container = ref<HTMLDivElement>();
const loading = ref(false);
const originTHml = reactive({
  pdf: null,
});
const style = ref<any>({});
let ins: any;

// 获取简历文件类型
async function getSelectResumeOriginal() {
  loading.value = false;
  try {
    const resp = await ResumeService.selectResumeOriginal();
    if (resp.code === 200) {
      if (resp.data.fileType === 'pdf') {
        fetchResumeUrl(resp.data?.originalFilePath);
        originTHml.pdf = resp.data?.originalFilePath;
      } else {
        fetchResumeUrl(resp.data?.convertPdfFilePath);
        originTHml.pdf = resp.data?.convertPdfFilePath;
      }
    }
  } catch (err) {
    console.log(err);
  }
  loading.value = false;
}
// 获取简历地址
async function fetchResumeUrl(path?: string) {
  try {
    const params = { mObject: path };
    const resp = await ResumeService.downloadResumeFile(params, {
      responseType: 'arraybuffer',
    });
    nextTick(() => {
      ins = new Pdfh5(container.value, {
        data: resp.data,
        pageNum: false,
        backTop: false,
        scrollEnable: false,
      });

      ins.on('ready', function () {
        // @ts-ignore @eslint-disable
        const _that = this as any;
        style.value = {
          height: `${1262.85 * _that.totalNum + 100}px`,
        };
      });
    });
  } catch (err) {
    console.log(err);
  }
}

function handleButton() {
  loading.value = true;
}

async function onDownLoad() {
  const params = { mObject: originTHml.pdf };
  const resp = await ResumeService.downloadResumeFile(params);
  const name = userStore?.userDetail?.seekerBO?.name;
  convertRes2Blob(resp, name ? name + '.pdf' : null);
}

onUnmounted(() => {
  ins?.destroy();
});

getSelectResumeOriginal();
</script>
<style lang="less" scoped>
.wrapper-yuanshijianli {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
  position: relative;
  .down-box {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    :deep(.anticon) {
      color: #6285ff;
    }

    &.upload-box {
      top: 55px;
      :deep(.resume-upload__btn) {
        width: auto;
        margin-top: 0;
        border: 0 none;
        padding: 0;
        .spanUpFiles2 {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #222222;
        }
      }
    }
  }
}
.wrapper-yuanshijianli2 {
  text-align: center;
  padding-top: 100px;
  .top {
    .p1 {
      height: 14px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 14px;
      margin-top: 30px;
    }
    .p2 {
      height: 12px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 12px;
      margin-top: 15px;
    }
  }
  .resume-upload__btn {
    width: 220px;
    border: 1px solid #1890ff;
    color: #1890ff;
    margin-top: 16px;
    img {
      margin-right: 8px;
    }
  }
  .uploadResume {
    position: absolute;
    right: 20px;
    bottom: 30px;
  }
}
.spanUpFiles {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.spanUpFiles2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: blue;
}
.resume-upload__btn {
  width: 238px;
  height: 35px;
  border: 1px solid #1890ff;
  color: #1890ff;
  margin-top: 16px;
  img {
    margin-right: 8px;
    margin-top: -5px;
  }
}
</style>
